<template>
	<view class="main">
		<!-- 搜索栏部分 -->
		<view class="search">
			<uni-search-bar v-model="info.info" radius="100" @confirm="requery" clearButton="auto"
				cancelButton="none"></uni-search-bar>
		</view>
		<!-- 留言板数据显示部分 -->
		<view class="info">
			<view class="card-box" v-for="d in list">
				<!-- 留言板用户信息部分 -->
				<view class="top">
					<!-- 头像 -->
					<view @click="showMy(d)">
						<img :src="api.getUserLogo(d.user.tbUser.uid)" class="avatar" />
					</view>
					<!-- 用户名和时间 -->
					<view style="margin-left: 8px;">
						<view style="font-size: 15px; font-weight: bold;">
							<view v-if="!d.user.tbUserInfo.nickname">暂未设置用户名</view>
							<view>{{d.user.tbUserInfo.nickname}}</view>
						</view>
						<view style="font-size: 10px;">{{tools.formatDate(d.lastupdate)}}</view>
					</view>
				</view>
				<!-- 留言板标题 -->
				<view class="title" @click="showDetail(d)">{{d.title}}</view>
				<!-- 底部 -->
				<view class="footer">
					<!-- 点击量 -->
					<view>
						<uni-icons type="eye" size="15"></uni-icons>{{d.hits}}
					</view>
					<!-- 评论量 -->
					<view>
						<uni-icons type="fire" size="15"></uni-icons>{{d.reply}}
					</view>
					<!-- 点赞量 -->
					<view @click="praise(d)" class="praise" :class="{active:d.exInfo.praised}">
						<view v-if="!d.exInfo.praised"><uni-icons type="hand-up" size="15"></uni-icons></view>
						<view v-else><uni-icons color="#1890ff" type="hand-up" size="15"></uni-icons></view>
						{{d.praise}}
					</view>
				</view>
			</view>
		</view>
		<!-- 上拉加载 -->
		<view><uni-load-more :status="more"></uni-load-more></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onTabItemTap,
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import api from '../../script/api.js'
	import tools from '../../script/tools.js'

	// 上拉加载
	const more = ref('more')

	const list = ref([])
	const info = ref({
		info: ''
	})
	const page = ref({
		pageSize: 10,
		pageNumber: 1
	})
	const order = ref(1)

	const reset = () => {
		order.value = 1
		page.value = {
			pageSize: 10,
			pageNumber: 1
		}
		requery()
	}

	const requery = () => {
		list.value = []
		page.value.pageNumber = 1
		query()
	}

	// 上拉加载更多生命周期
	onReachBottom(() => {
		console.log('触底：')
		if (page.value.pageNumber >= page.value.pageCount) {
			more.value = "nomore"
			// 没有更多数据
			return;
		}
		page.value.pageNumber++;
		query()
	})

	// 下拉刷新生命周期
	onPullDownRefresh(() => {
		reset()
	})

	// 点击首页刷新回到顶部
	// onTabItemTap((e) => {
	// 	console.log("tab切换:", e)
	// 	if (e.index == 0) {
	// 		reset()
	// 	}
	// })

	const query = () => {
		// uni.showLoading({})
		more.value = "loading"
		api.get(`/message/${page.value.pageSize}/${page.value.pageNumber}/${order.value}`, info.value, (resp) => {
			more.value = "more"
			// uni.hideLoading()
			uni.stopPullDownRefresh()
			if (resp.success) {
				list.value = list.value.concat(resp.data.data)
				page.value = resp.data.pageBean
			}
		})
	}

	query()

	// 跳转指定用户主页
	const showMy = (minfo) => {
		uni.navigateTo({
			url: `/pages/your/your?uid=${minfo.uid}`
		})
	}

	// 跳转帖子详情
	const showDetail = (info) => {
		uni.navigateTo({
			url: `/pages/message/Detail?mid=${info.mid}`
		})
	}

	// 点赞留言板按钮
	const praise = (pinfo) => {
		api.post(`/message/praise/${pinfo.mid}`, {}, (resp) => {
			if (resp.success) {
				pinfo.exInfo.praised = !pinfo.exInfo.praised
				pinfo.praise = pinfo.exInfo.praised ? pinfo.praise + 1 : pinfo.praise - 1
			} else if (resp.code == 1000) {
				uni.showToast({
					title: "请先登录",
					icon: 'error',
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.main {}

	.info {
		overflow-y: auto;
	}

	.search {
		position: sticky;
		top: 0px;
		width: 100%;
		background-color: #fff;
	}

	.card-box {
		margin: 0; // 卡片外边距
		padding: 20px; // 卡片内边距
		overflow: hidden; // 溢出隐藏

		&:not(:last-child) {
			border-bottom: 0.1px solid #dcdcdc;
		}
	}

	.top {
		display: flex;
		align-items: flex-start;
	}

	.avatar {
		width: 38px;
		height: 38px;
		border-radius: 50%;
	}

	.title {
		display: inline-block;
		padding: 1rem 0px;
		font-size: 15px;
		cursor: pointer;
		transition: color 0.3s; //颜色转换时间

		&:hover {
			color: #1890ff;
		}
	}

	.active {
		color: #1890ff;
	}

	.footer {
		display: flex;
		font-size: 15px;
		// padding: 0 20px;
		gap: 8px 20px; //行间距
		align-items: center; //垂直居中
		justify-content: flex-end;
		// justify-content: space-between; //水平等份分布
	}

	.praise {
		display: flex;
		align-items: center;
	}
</style>